<template>
	<!-- pages/category/category.wxml -->
	<view class="cates">
		<!-- 搜索框 开始 -->
		<uni-nav-bar color="#000" background-color="#fff" right-icon="scan" @clickRight="scanCode">
			<view class="input-view">
				<uni-icons style="line-height: 30px;" type="search" size="16" color="#666666" />
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="优选好物" @click="toSearch">
			</view>
		</uni-nav-bar>
		<!-- 搜索框 结束 -->
		<view class="cates_container">
			<!-- 左侧菜单 -->
			<scroll-view scroll-y="true" class="left_menu">
				<view v-for="(item, index) in leftMenuLift" :key="index"
					:class="'menu_item ' + (index===currentIndex?'active':'')" @tap="handleItemTap" :data-index="index">
					{{item}}
				</view>
			</scroll-view>
			<!-- 右侧商品内容 -->
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="right_content">
				<view v-for="(item1, index1) in rightContent" :key="index1" class="goods_group">
					<view class="goods_title">
						<text class="delimiter">/</text>
						<text class="title">{{item1.cat_name}}</text>
						<text class="delimiter">/</text>
					</view>
					<view class="goods_list">
						<navigator v-for="(item2, index2) in item1.children" :key="index2"
							:url="'/pages/goods_list/goods_list?cid=' + item2.cat_id">
							<image mode="widthFix" :src="item2.cat_icon"></image>
							<view class="goods_name">{{item2.cat_name}}</view>
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// pages/category/category.js
	// 引入用来发送请求的方法 一定要把路径补全
	import {
		request
	} from "../../request/index.js";
	import regeneratorRuntime from "../../lib/runtime/runtime";

	export default {
		data() {
			return {
				// 左侧的菜单数据
				leftMenuLift: [],
				// 右侧的商品数据
				rightContent: [],
				// 被点击的左侧的菜单
				currentIndex: 0,
				// 右侧内容的滚动条距离顶部的距离
				scrollTop: 0,
				// 接口的返回数据
				Cates: []
			};
		},

		// components: {

		// },
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// 1. 获取本地存储中的数据
			const Cates = wx.getStorageSync("cates"); // 2. 判断

			if (!Cates) {
				// 不存在 发送请求获取数据
				this.getCates();
			} else {
				// 有旧的数据 定义过期时间为10s
				if (Date.now() - Cates.time > 1000 * 10) {
					// 重新发送请求
					this.getCates();
				} else {
					// 可以使用旧的数据
					this.Cates = Cates.data;
					let leftMenuLift = this.Cates.map(v => v.cat_name);
					let rightContent = this.Cates[0].children;
					this.setData({
						leftMenuLift,
						rightContent
					});
				}
			}
		},

		methods: {
			//搜索
			toSearch() {
				uni.navigateTo({
					url: '../search/search'
				})
			},
			//调用扫码
			scanCode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			// 获取分类数据  async是异步的意思
			async getCates() {
				// 1. 使用es7的async await来发送请求
				const res = await request({
					url: "/categories"
				});
				this.Cates = res; // 把接口的数据存入到本地存储中

				wx.setStorageSync("cates", {
					time: Date.now(),
					data: this.Cates
				}); // 构造左侧的大菜单数据

				let leftMenuLift = this.Cates.map(v => v.cat_name); // 构造右侧的商品数据

				let rightContent = this.Cates[0].children;
				this.setData({
					leftMenuLift,
					rightContent
				});
			},

			// 左侧菜单的点击事件
			handleItemTap(e) {
				// console.log(e);
				// 1. 获取被点击的标题身上的索引
				// 2. 给data中的currentIndex赋值
				// 3. 根据不同的索引来渲染右侧的商品内容
				const {
					index
				} = e.currentTarget.dataset;
				let rightContent = this.Cates[index].children;
				this.setData({
					currentIndex: index,
					rightContent,
					// 重新设置 右侧内容的scroll-view标签的距离顶部的距离
					scrollTop: 0
				});
			}

		}
	};
</script>
<style>
	@import "./category.css";

	.input-view {
		display: flex;
		flex-direction: row;
		flex: 1;
		background-color: #f8f8f8;
		height: 30px;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
	}

	.nav-bar-input {
		height: 30px;
		line-height: 30px;
		width: 500rpx;
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
</style>
